<template>
  <div class="listPage">
    <div class="fixedTop">
      <div class="searchLeft">
        <!-- <Search :searchForm="searchForm" @search="search" @resetData="resetData"></Search> -->
     <div class="search-bar">
        <el-form
      inline
      label-position="right"
      label-width="90px"
      ref="seachRef"
      :model="searchData"
    >
        <template>
            <el-form-item prop="code"> 
              <el-input
                v-model.trim="searchData.code"
                placeholder="运单号" >
              </el-input>
            </el-form-item>
            <el-form-item prop="driver_name"> 
              <el-input
                v-model.trim="searchData.driver_name"
                placeholder="司机姓名" >
              </el-input>
            </el-form-item>
            <el-form-item prop="truck_code"> 
              <el-input
                v-model.trim="searchData.truck_code"
                placeholder="车牌号12" >
              </el-input>
            </el-form-item>
            <el-form-item prop="status">
              <el-select
              v-model="searchData.status"
              placeholder="选择车辆类型"
            >
              <el-option
                v-for="(option, index) in options"
                :key="option.label + '' + index"
                :label="option.label"
                :value="option.value"
                :disabled="option.disabled"
              >
              </el-option>
              </el-select>
            </el-form-item>
            
          
        </template>
        <!-- <el-col :span="6" class="search-cont"> -->
          <el-button
            class="btnAc btnSearch"
            @click="search"
            >查询</el-button
          >
        <!-- </el-col> -->
        <el-button class="btnNo btnReset" size="default" @click="resetData">重置</el-button>
        
      <!-- </el-row> -->
    </el-form>

      </div>
      </div>

       <div class="btnRight">
        <el-button class="btnAc btnAdd" type="primary" size="default"  @click="todetail">录入运单</el-button>
      </div>
    </div>


    <div class="listTableBox">
      <el-card class="tableBox" :body-style="{ padding: '0' }">
        <Table class="tabBtn" :table_config="table_config"  v-loading="isLoading">
          <!-- <template v-slot:status="slotData">
            <span>{{slotData.data.status_vo.description}}</span>
          </template> -->
          <template v-slot:operation="slotData">
            <div class="btnDiv">
              <template>
                <!-- <span class="spanBtn" @click="submitForm(slotData.data)">提交</span> -->
                <span class="spanBtn" @click="editInfo(slotData.data)">修改</span>
              </template>
              <!-- <span v-else class="spanBtn" @click="weachInfo(slotData.data)">查看</span> -->
            </div>
          </template>

          <template v-slot:orderInfo="slotData">
            <div class="btnDiv">
              <p class="product_name">{{slotData.data.order_item_vo.product_name}}</p>
             
              <p class="product_name">
                {{slotData.data.order_item_vo.product_weight/1000+'t'}} /
                {{slotData.data.order_item_vo.standard_long !='' ? '长'+slotData.data.order_item_vo.standard_long:''}}
                {{slotData.data.order_item_vo.standard_width !='' ? '* 宽'+slotData.data.order_item_vo.standard_width:''}}
                {{slotData.data.order_item_vo.standard_high !='' ? '* 高'+ slotData.data.order_item_vo.standard_high:''}}
                <i v-if="slotData.data.order_item_vo.standard_long !='' || slotData.data.order_item_vo.standard_width !='' || slotData.data.order_item_vo.standard_high !=''">m</i>
                </p>
              <p class="address shou"><span>收</span>：{{slotData.data.order_delivery_vo.consignee_address}}</p>
              <p class="address zhuang"><span>装</span>：{{slotData.data.order_delivery_vo.load_address}}<br></p>
            </div>
          </template>
          <template v-slot:driverInfo="slotData">
            <div class="btnDiv">
              <p>{{slotData.data.driver_name}}</p>
              <p>{{slotData.data.driver_mobile}}</p>
            </div>
          </template>
          <template v-slot:fareInfo="slotData" >
            <span v-if="slotData.data.order_payable_vo.total_cost && slotData.data.order_payable_vo.total_cost!=''">
              {{(slotData.data.order_payable_vo.total_cost - slotData.data.order_payable_vo.fare) | numFilterTwo}}
            </span>
            <span v-else></span>
          </template>
          <template v-slot:truckInfo="slotData">
            <div class="btnDiv">
              <p class="trucksCode">{{slotData.data.truck_code}}</p>
              <p class="trucksInfo">{{slotData.data.truck_vo.type_vo.value}} / {{slotData.data.truck_vo.volume | numFilter}}m</p>
            </div>
          </template>
          <template v-slot:reason="slotData">
            <span style="color:#F5222D;">{{slotData.data.status_vo.context}}</span>
          </template>
        </Table>
        <div class="divPage">
          <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentpage.page"
          :page-sizes="[2, 5, 6, 10]"
          :page-size="currentpage.per_page"
          layout="total, sizes, prev, pager, next"
          :total="totalNum">
        </el-pagination>
      </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import Table from "@/components/Table.vue";
import Search from '@/components/Search.vue';
import { tucksType,energyType,trucksSellType,provinceType,licenseColor} from '@t/trucksType.js' 

export default {
  components: { Table, Search },
  data () {
    return {
      options: [
        {
          value: "NO_SUBMIT",
          label: "未提交"
        },
        {
          value: "选项2",
          label: "审核中"
        },
        {
          value: "选项3",
          label: "驳回"
        }
      ],
      searchData:{
        code:'',
        driver_name:'',
        truck_code:'',
        status:'',
      },
      tucksType:tucksType,    //车辆类型
      table_config: {   //表格数据
        tableHead: [
          { label: "业务单号", prop: "cid" },
          { label: "运单号", prop: "code" },
          { label: "订单信息",columnType:"slot",slotName:"orderInfo",width:'190px' },  //
          { label: "司机信息",columnType:"slot",slotName:"driverInfo"},
          { label: "车辆信息",columnType:"slot",slotName:"truckInfo"},
          { label: "运费/元", prop: "order_payable_vo.fare" ,width:'108px'},
          // { label: "留存运费比例",columnType:'tip', prop: "order_payable_vo.keep_farepro_portion"},
          { label: "留存运费/元", prop: "order_payable_vo.keep_fare",columnType:"slot",slotName:"fareInfo" },
          { label: "总费用/元", prop: "order_payable_vo.total_cost"},
          { label: "发起时间", prop: "submit_time"},
          { label: "异常原因", prop: "submit_time",columnType:"slot",slotName:"reason"},

          // { label: "状态", prop:"status",columnType:"slot",slotName:"status"},
          { label: "操作", columnType:"slot",slotName:"operation",width:'100px'}
        ],
        tableData:[],
        checkbox: false, //表格复选框是否显示
      },
      totalNum:0,    //总条目
      currentpage:{
        page:1,   //当前页
        per_page:10,   //每页条数
      },
      isLoading:true,    //loading
    };
  },
  created () {
    this.getMenuList(this.currentpage);
  },
  mounted () {
    document.getElementsByClassName("el-pagination__total")[0].childNodes[0].nodeValue = "共 "+this.totalNum+' 个运单';
  },
  filters: {
    numFilter (value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value/1000).toFixed(2)
      return realVal
    },
    numFilterTwo (value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2)
      return realVal
    }
  },
  methods: {
    //提交订单
    submitForm(val){
      this.$http.ordersApi.submitForm(val.id).then(res => {
        console.log(res);
        if(res.status == 200){
          this.$message.success("提交成功")
          this.$router.go(0)
        }
      })
      .catch(err => {
        this.$message.warning(err.data.err_msg)
      })
    },
    //查看信息
    weachInfo(val){
      this.$store.commit('setOrdersId', val.id);
      sessionStorage.setItem('orderId',val.id)
      this.$store.commit('lookType', 'orders');
      sessionStorage.setItem('lookType','orders')
      this.$router.push({
        name: 'errorders', 
        params: { 
          id: val.id,
          type:'orders'
        }
      })
    },
    // 点击编辑信息
    editInfo(val){
      this.$store.commit('setOrdersId', val.id);
      sessionStorage.setItem('orderId',val.id)
      this.$router.push({
        name: 'errorders', 
        params: { id: val.id }
      })
    },
    // 保存重新绑卡数据
    savaCard(){
      this.$refs.cardRef.validate((valid) => {
        if (valid) {
          this.$message.success("保存成功")
          this.cardDialog=false
        } else {
          this.$message.warning("请正确填写信息")
        }
      });
    },
    //获取订单异常列表
    async getMenuList(params){
      await this.$http.ordersApi.ordersErrList(params).then(res => {
        if(res.status == 200){
          this.isLoading=false
          console.log(res);
          console.log(res.data);
          this.table_config.tableData=res.data.result
          this.totalNum = res.data.total_num
        }
      })
    },
    //进入详情页
    todetail(){
      // sessionStorage.removeItem('truckId')
      this.$router.push({name:'orders_add'})
    },
    //重置搜索
    async resetData(){
      this.$refs.seachRef.resetFields();
      this.isLoading=true
      const page={
        page:1,
        per_page:10
      }
      this.getMenuList(page)

    },
    //搜索列表
    search(){
      this.isLoading=true
      this.currentpage.page=1
      const params=Object.assign(this.currentpage, this.searchData);
      console.log(params);
      this.getMenuList(params)
      
    },
    //当前页发生变化
    handleCurrentChange(val){
      this.isLoading=true
      this.currentpage.page=val
      this.getMenuList(this.currentpage)
    },
    //每页条数发生变化
    handleSizeChange(val){
      this.isLoading=true
      this.currentpage.page=1
      this.currentpage.per_page=val
      this.getMenuList(this.currentpage)
    },
  },
}

</script>

<style scoped>
.btnAdd{
  width: 104px;
}
.listTableBox{
  margin-top: 88px;
  padding:24px;
}
/* 绑定银行卡信息 */
.dialogInfo{
  padding: 0 24px;
}
.dialogInfo p{
  height: 32px;
  line-height: 32px;
}
.dialogInfo p span{
  color: #9AA1B5;
} 
.dialogInfo p i{
  color: #171717;
} 

.dialogInfo div{
  padding: 10px 0;
}
.dialogInfo div:first-of-type{
  border-bottom: 1px solid #F0F1F5;
}
.dialogFooter{
  background: rgba(141, 180, 244, 0.09);
  padding: 18px 24px;
  border-top: 1px solid #DCEAFE;
  }
.btns{
  width: 76px;
}
.dialogBtn{
  text-align: end;
}
.btnDiv{
  display: block;
}
.address{
  color: #8F92A1;
}

.shou span{
  background: #52C41A;
  color: #fff;
  font-size: 12px;
  padding: 1px 3px;
  border-radius: 2px;
}
.zhuang{
  margin-top: 4px;
}
.zhuang span{
  background: #FA6500;
  color: #fff;
  font-size: 12px;
  padding: 1px 3px;
  border-radius: 2px;
}
.product_name{
  color:#2878FF ;
}
.trucksCode{
  color: #171717;
}
.trucksInfo{
  color: #8F92A1;
}
</style>